<template>
	<view class="">
		<headerTar title="充值" />
		<view class="recharge">
			<view class="top">
				<view class="tip">
					<view class="b_title">充值金额</view>
				</view>
				<view class="content">
					<view class="c_box" :class="{ c_box_click: moneySelected == i }" v-for="(item, i) in tableData"
						:key="i" @click="moneySed(item,i)">
						<view class="c_txt"> {{ item.price }}<text>元</text> </view>
						<view class="c_money">售{{ item.price }}元 </view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="tip">
					<view class="b_title">支付方式</view>
				</view>

				<view class="c_box">
					<view class="c_left"><u-icon class="weixin" name="weixin-circle-fill" size="40rpx" color="#01b168"></u-icon>
						<view class="c_left_txt1">微信支付</view>
					</view>
					<view class="c_right">
						<u-radio-group v-model="value" class="radio">
							<u-radio :name="1" active-color="#2fbc64"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="floot">
				<view class="b_money"> <text>￥</text>{{ showPrice }} </view>
				<view class="goSettlement" @click="goImmediatePay"> 去结算 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createAPi
	} from '@/api/pay.js'
	import headerTar from '@/components/headerTar/header'
	export default {
		components: {
			headerTar
		},
		data() {
			return {
				moneySelected: 0, //费用选中
				showPrice: 1, //记录点击价格
				value: 1,
				tableData: [{
					price: 1
				}, {
					price: 20
				}, {
					price: 50
				}, {
					price: 100
				}, {
					price: 200
				}, {
					price: 300
				}, ]
			}
		},
		methods: {
			moneySed(item, i) {
				this.showPrice = item.price
				this.moneySelected = i
			},
			goImmediatePay() {
				createAPi({
					price: this.showPrice
				}).then(res => {
					wx.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageVal,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success(res) {
							console.log(res);
						},
						fail(res) {}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		padding: 0;
		margin: 0;
		background-color: #f7f7f7;
		box-sizing: border-box;
		overflow: hidden;
	}

	.top {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;


		.tip {
			margin-top: 20rpx;
			padding-bottom: 10rpx;
			position: relative;


			.b_title::before {
				content: "";
				position: absolute;
				top: 8rpx;
				left: 0rpx;
				width: 6rpx;
				height: 32rpx;
				background-color: #3dc579;
			}

			.b_title {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20rpx;
				margin-bottom: 30rpx;
			}

			.b_title2 {
				position: absolute;
				top: -4rpx;
				right: 20rpx;
				padding: 10rpx;
				color: #fff;
				background-color: #3dc579;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-weight: bold;
			}
		}

		.content {
			margin-top: 0;
			overflow: hidden;
			background-color: #fff;

			.c_box {
				display: inline-block;
				width: 30%;
				height: 140rpx;
				margin-bottom: 10rpx;
				margin-right: 24rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				background-color: #00b167;
				border-radius: 10rpx;
				border: 2rpx solid #00b167;
				margin-bottom: 20rpx;
				overflow: hidden;

				.c_txt {
					font-size: 32rpx;
					border-radius: 10rpx;
					margin-top: 20rpx;
					overflow: hidden;

					text {
						font-size: 24rpx;
					}
				}

				.c_money {
					font-size: 28rpx;
				}
			}

			.c_box:nth-child(3n) {
				margin-right: 0rpx;
			}

			.c_box_green {
				color: #00b167;
				border: 2rpx solid #00b167;
				background-color: #fff;

				.c_txt {
					color: #00b167;
				}

			}

			.c_box_click {
				background-color: #fff;
				color: #00b167;
				border: 2rpx solid #00b167;
			}
		}
	}

	.bottom {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;

		.tip {
			margin-top: 20rpx;
			// padding-bottom: 10rpx;
			position: relative;


			.b_title::before {
				content: "";
				position: absolute;
				top: 8rpx;
				left: 0rpx;
				width: 6rpx;
				height: 32rpx;
				background-color: #3dc579;
			}

			.b_title {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20rpx;
				margin-bottom: 10rpx;
			}

			.b_title2 {
				position: absolute;
				top: -4rpx;
				right: 20rpx;
				padding: 10rpx;
				color: #fff;
				background-color: #3dc579;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-weight: bold;
			}
		}

		.c_box {
			// margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			// padding: 5rpx 10rpx;
			font-size: 24rpx;
			font-weight: bold;


			.c_left {
				flex: 3;
				display: flex;
				line-height: 80rpx;
				overflow: hidden;

				.c_left_txt1 {
					margin-left: 15rpx;
				}
			}

			.c_right {
				flex: 1;
				font-size: 28rpx;
				display: flex;
				line-height: 80rpx;
				text-align: right;
				overflow: hidden;



				// .c_left_txt2 {
				// 	margin-right: 25rpx;
				// }
			}
		}
	}

	.floot {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 150rpx;
		padding: 0 20rpx;
		line-height: 150rpx;
		border-top: 2rpx solid #e7e7e7;
		box-sizing: border-box;

		.b_money {
			font-size: 40rpx;
			color: red;
			font-weight: bold;

			text {
				font-weight: 300;
				font-size: 32rpx;
			}
		}

		.goSettlement {
			margin-top: 35rpx;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 12rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #fff;
			background-color: #30bf62;
		}
	}

	::v-deep .u-radio-group {
		justify-content: flex-end;
	}
</style>